var cpage = 1;
function page_view_count_top10(p) {
    showTableAndEcharts();
    stopColor();
    isFlag = true;
    cpage = p;
    page_view_count_top10_table();
    page_view_count_top10_echart();
}


function page_view_count_top10_table() {
    $.ajax({
        method: "POST",
        url: "pageViewCountTop10ByPage",
        data: {
            page: cpage
        },
        success: function (data) {

            var jsonArr = JSON.parse(data);

            $("#tip").html("<h3>浏览量top10页面表格</h3>");
            $("#echart-tip").html("<h3>浏览量top10页面图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>页面</th><th>浏览量</th>");
            //重置表的数据
            $("tbody").empty();

            $.each(jsonArr, function (index, pageView) {
                if (index % 2 == 0) {
                    $("tbody").append("<tr class='active'><td>"+pageView.id+"</td><td>"+pageView.page+"</td><td>"+pageView.count+"</td></tr>")
                } else {
                    $("tbody").append("<tr class='info'><td>"+pageView.id+"</td><td>"+pageView.page+"</td><td>"+pageView.count+"</td></tr>")
                }
            });

            $("tbody tr").on("mouseenter", this, function() {
                color = $(this).attr("class");
                $(this).removeClass(color);
                $(this).addClass("success");
            });
            $("tbody tr").on("mouseleave", this, function() {
                $(this).removeClass("success");
                $(this).addClass(color);
            });

            //循环获取分页的页数
            var pages = 0;
            $.ajax({
                method: "POST",
                url: "getPageViewCountTop10Pages",
                success: function (data) {
                    pages = data;

                    //添加分组组件
                    var page = "<tr><td colspan='3'>";
                    page += "<nav aria-label='Page navigation'>";
                    page += "<ul class='pagination'>";
                    page += "<li>";
                    if (cpage > 1) {
                        page += "<a href='javascript:page_view_count_top10("+(cpage - 1)+")' aria-label='Previous'>";
                    } else {
                        page += "<a href='javascript:page_view_count_top10(1)' aria-label='Previous'>"
                    }
                    page += "<span aria-hidden='true'>&laquo;</span>";
                    page += "</a>";
                    page += "</li>";

                    for (var i = 1; i<=pages; i++) {
                        if (cpage == i) {
                            page += "<li class='active'><a href='javascript:page_view_count_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                        } else {
                            page += "<li><a href='javascript:page_view_count_top10("+i+")'>"+i+"</a></li>"
                        }
                    }


                    page += "<li>";

                    if (cpage < pages) {
                        page += "<a href='javascript:page_view_count_top10("+(cpage+1)+")' aria-label='Next'>"
                    } else {
                        page += "<a href='javascript:page_view_count_top10("+pages+")' aria-label='Next'>"
                    }

                    page += "<span aria-hidden='true'>&raquo;</span>";
                    page += "</a>";
                    page += "</li>";
                    page += "</ul>";
                    page += "</nav>";
                    page += "</td></tr>";
                    $("tbody").append(page);
                    $("tbody tr:last-child td").css("text-align", "center")
                }
            });


        }
    })

}


function page_view_count_top10_echart() {
    $.ajax({
        method: "POST",
        url: "pageViewCountTop10",
        success: function (data) {

            var jsonArr = JSON.parse(data);

            //添加图表对应的容器
            $("#dataEcharts div:gt(0)").remove();
            $("#dataEcharts").append('<div id="page_view_top10_1" class="col-sm-6"></div>');
            $("#dataEcharts").append('<div id="page_view_top10_2" class="col-sm-6"></div>');
            var all_data = [];
            var x_data = [];
            var y_data = [];
            $.each(jsonArr, function (index, proUsersTop3) {
                all_data.push(
                    {
                        value: proUsersTop3.count,
                        name: proUsersTop3.page
                    }
                );
                x_data.push(proUsersTop3.page);
                y_data.push(proUsersTop3.count);
            });

            var eraTotal = echarts.init(document.getElementById("page_view_top10_1"));
            var option = {
                title: {
                    text: '浏览量top10页面',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 60,
                    top: 100,
                },
                series: [{
                    name: '浏览量top10页面',
                    type: 'pie',
                    radius: ['40%', '80%'],
                    center: ['30%', '54%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    data: all_data
                }]
            };
            eraTotal.setOption(option);
            eraTotal.resize({
                width: 600,
                height: 400
            });

            var eraTotal2 = echarts.init(document.getElementById("page_view_top10_2"));
            option2 = {
                xAxis: {
                    type: 'category',
                    data: x_data
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item',
                },
                series: [
                    {
                        data: y_data,
                        type: 'bar'
                    }
                ]
            };
            eraTotal2.setOption(option2);
            eraTotal2.resize({
                width: 600,
                height: 400
            });

        }
    });
}